<template>
  <view class="pages">
    <view class="header">
      <view class="header-left">
        <view class="box">
          <text style="font-size: 72rpx">您好</text>
          <text style="width: 384rpx; font-size: 48rpx; font-weight: 700; color: #fff"
            >欢迎登录</text
          >
        </view>
        <image
          style="
            width: 348rpx;
            height: 348rpx;
            position: absolute;
            right: 30rpx;
            top: 140rpx;
          "
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_logobg@3x.png"
        />
      </view>
    </view>
    <view class="content">
      <uni-forms ref="form" :model="formData" :rules="rules" @submit="onSubmit">
        <!-- <uni-forms-item name="phone" style="margin-left: 24rpx;margin-bottom: 0;"> -->
        <input
          type="number"
          class="uni-easyinput"
          v-model="phone"
          placeholder="请输入您的手机号"
          placeholder-style="font-size:32rpx"
        />
        <!-- </uni-forms-item> -->
        <!-- <uni-forms-item name="password" style="margin-left: 24rpx;margin-bottom: 32rpx;"> -->
        <view class="uni-easyinpu" style="padding-top: 36rpx;box-sizing: border-box;">
          <input
          style="width: 75%;"
          v-model="password"
          placeholder="请输入您的密码"
          placeholder-style="font-size:32rpx"
          :password="showPassword"
        />
        <!-- </uni-forms-item> -->
        <image
        class="uni-icon"
        style="width: 48rpx;height: 48rpx;"
          :src="[
            !showPassword
              ? 'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/button_mimak@3x.png'
              : 'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/button_mimag@3x.png',
          ]"
          @click="changePassword()"
        />
        </view>
        <view style="display: flex; justify-content: space-between">
          <text class="wenti" @click="gotoReset()">忘记密码?</text>
          <!-- <text class="wenti" @click="gotoSign()">注册新用户</text> -->
        </view>
        <view class="agreement">
          <checkbox-group @change="checkedBox">
            <checkbox
              color="rgba(64,158,255,1)"
              style="transform: scale(0.75); margin-right: 12rpx"
              value="cd"
            />我已阅读并同意
          </checkbox-group>
          <text @click="goAgent" style="color: rgb(64, 158, 255)">《用户协议》</text>
          <text>和</text>
          <text @click="goAgentPrivacy" style="color: rgb(64, 158, 255)"
            >《隐私协议》</text
          >
        </view>
        <button class="sub" form-type="submit" @click="submitForm">登录</button>
        <!-- <button class="zhuce" form-type="submit" @click="gotoSign">注册</button>   -->
      </uni-forms>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useStore } from "../../store/store";
import { httpRequest } from "../../utils/http";
//切换登陆模式
const isShow = ref(true);
const store = useStore();
const showPassword = ref(true);
const { safeAreaInsets } = uni.getSystemInfoSync();
const phone = ref("");
const password = ref("");
const checked = ref([]);

onLoad((e) => {
  //检测是否登陆 已登录跳转首页
  //   if (uni.getStorageSync("token")) {
  //     uni.switchTab({ url: "/pages/index/index" });
  //   }
});

const rules = reactive({
  phone: [
    {
      required: true,
      errorMessage: "请输入手机号",
    },
  ],
});
const goAgent = () => {
  uni.navigateTo({ url: "/pages/index/agent" });
};
const goAgentPrivacy = () => {
  uni.navigateTo({ url: "/pages/index/agentPrivacy" });
};
const checkedBox = (e) => {
  console.log(e.detail);
  checked.value = e.detail.value;
};
const gotoReset = () => {
  uni.navigateTo({ url: "/pages/login/reset" });
};
const regex = /^1[3456789]\d{9}$/;
const changePassword = () => {
  console.log(1);
  showPassword.value = !showPassword.value;
};
const submitForm = async () => {
  if (checked.value[0] != "cd")
    return uni.showToast({ title: "请先勾选协议", icon: "none" });
  //表单验证
  // this.$refs.form.validate()

  if (!phone.value || !password.value) {
    uni.showToast({
      title: "用户名密码不能为空",
      icon: "none",
    });
    return;
  }
  if (!regex.test(phone.value))
    return uni.showToast({ title: "手机号码格式不正确", icon: "none" });

  //登录请求
  const res = await httpRequest("/api/agentLogin", "POST", {
    phone: phone.value,
    password: password.value,
  });
  console.log(res);
  if (res.code != 0) {
    return uni.showToast({ title: res.message, icon: "none" });
  } else {
    uni.showToast({ title: "登陆成功", icon: "none" });
    //保存store仓库
    store.setUserInfo(res.data.agent);
    store.setToken(res.data.token);
    //保存本地
    uni.setStorageSync("token", res.data.token);
    uni.setStorageSync("agent", res.data.agent);
    //跳转
    setTimeout(() => {
      uni.switchTab({ url: "/pages/index/index" });
    }, 1500);
  }
};
</script>

<style lang="scss">
.pages {
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  overflow: hidden;
  overflow-y: scroll;
  .header {
    width: 100%;
    height: 610rpx;
    overflow: hidden;
    background-color: rgb(64, 158, 255);
    .header-left {
      display: flex;
      line-height: 90rpx;
      justify-content: space-between;
      height: 191rpx;
      width: 100%;
      .box {
        position: absolute;
        top: 267rpx;
        display: flex;
        flex-direction: column;
        font-size: 72rpx;
        font-weight: 700;
        color: #fff;
        margin-left: 48rpx;
      }
      .icon {
        margin-top: 20rpx;
        width: 40rpx;
        height: 40rpx;
        // margin: 60rpx 68rpx 16rpx 14rpx;
      }
      .yanzhengma {
        width: 250rpx;
        height: 50rpx;
        border: 0px solid #000;
        size: 32rpx;
        text-align: center;
        margin-top: 20rpx;
      }
    }
  }
  .title {
    font-size: 52rpx;
    font-weight: 520;
    color: #404040;
    margin-left: 16rpx;
    margin-bottom: 100rpx;
  }
  .content {
    box-sizing: border-box;
    width: 100%;
    padding: 24rpx 48rpx;
    position: absolute;
    top: 464rpx;
    background-color: #fff;
    border-radius: 48rpx 48rpx 0 0;
    .uni-easyinput {
      width: 654rpx;
      margin-bottom: 24rpx;
      height: 48rpx;
      border-bottom: 1px solid #d9d9d9;
      padding: 24rpx 0;
    }

    .uni-easyinpu {
      height: 112rpx;
      width: 654rpx;
      border-bottom: 1px solid #d9d9d9;
      margin-bottom: 32rpx;
    }
    .uni-icon {
      z-index: 999;
      width: 48rpx;
      height: 48rpx;
      position: absolute;
      top: 180rpx;
      right: 72rpx;
    }
    .agreement {
      height: 96rpx;
      display: flex;
      align-items: center;
      font-size: 24rpx;
      margin-top: 96rpx;
    }
    .wenti {
      font-size: 28rpx;
      color: #a7a7a7;
      // margin-top: 32rpx;
    }
    .sub {
      width: 654rpx;
      height: 88rpx;
      background-color: rgb(64, 158, 255);
      font-size: 32rpx;
      color: #fff;
      text-align: center;
      line-height: 97rpx;
      margin: 0;
      border-radius: 344rpx;
    }
    .zhuce {
      width: 654rpx;
      height: 88rpx;
      background-color: rgba(241, 241, 241, 1);
      font-size: 32rpx;
      color: rgba(48, 49, 51, 1);
      text-align: center;
      line-height: 97rpx;
      margin: 0;
      margin-top: 24rpx;
      border-radius: 344rpx;
      border: none;
    }
  }
  .btm {
    width: 100%;
    margin-top: 80rpx;
    button {
      width: 100%;
      height: 100rpx;
      background-color: #f1f2f4;
      font-size: 32rpx;
      border: none;
    }
    .quxiao {
      margin-top: 20rpx;
    }
  }
}
</style>
